<template>
	<view class="container">
		<view class="header">
			<text class="title">16种MBTI人格类型</text>
		</view>

		<view class="category-tabs">
			<view 
				class="category-tab" 
				v-for="(category, index) in categories" 
				:key="index"
				:class="{'active': activeCategory === category, 
				        'analyst': category === '分析家',
				        'diplomat': category === '外交家',
				        'sentinel': category === '哨兵',
				        'explorer': category === '探险家'}"
				@click="activeCategory = category">
				<text>{{category}}</text>
			</view>
		</view>

		<view class="hint-bar">
			<text class="hint-text">点击卡片查看详细介绍</text>
		</view>

		<view class="types-grid">
			<view class="type-card" v-for="type in filteredTypes" :key="type.code" @click="goToDetail(type.code)">
				<image class="type-image" :src="type.image" mode="aspectFill"></image>
				<view class="type-info" :class="{
					'analyst-card': type.category === '分析家',
					'diplomat-card': type.category === '外交家',
					'sentinel-card': type.category === '哨兵',
					'explorer-card': type.category === '探险家'
				}">
					<text class="type-code">{{type.code}}</text>
					<text class="type-name" style="float: right;">{{type.nickname}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mbtiData from '@/data/mbti-types.js';

	export default {
		data() {
			return {
				activeCategory: '全部',
				categories: ['全部', '分析家', '外交家', '哨兵', '探险家'],
				mbtiTypes: [{
						code: "INTJ",
						nickname: "建筑师",
						image: "/static/mbti/intj.svg",
						category: "分析家"
					},
					{
						code: "INTP",
						nickname: "逻辑学家",
						image: "/static/mbti/intp.svg",
						category: "分析家"
					},
					{
						code: "ENTJ",
						nickname: "指挥官",
						image: "/static/mbti/entj.svg",
						category: "分析家"
					},
					{
						code: "ENTP",
						nickname: "辩论家",
						image: "/static/mbti/entp.svg",
						category: "分析家"
					},
					{
						code: "INFJ",
						nickname: "提倡者",
						image: "/static/mbti/infj.svg",
						category: "外交家"
					},
					{
						code: "INFP",
						nickname: "调停者",
						image: "/static/mbti/infp.svg",
						category: "外交家"
					},
					{
						code: "ENFJ",
						nickname: "主人公",
						image: "/static/mbti/enfj.svg",
						category: "外交家"
					},
					{
						code: "ENFP",
						nickname: "活动家",
						image: "/static/mbti/enfp.svg",
						category: "外交家"
					},
					{
						code: "ISTJ",
						nickname: "物流师",
						image: "/static/mbti/istj.svg",
						category: "哨兵"
					},
					{
						code: "ISFJ",
						nickname: "守卫者",
						image: "/static/mbti/isfj.svg",
						category: "哨兵"
					},
					{
						code: "ESTJ",
						nickname: "总经理",
						image: "/static/mbti/estj.svg",
						category: "哨兵"
					},
					{
						code: "ESFJ",
						nickname: "执政官",
						image: "/static/mbti/esfj.svg",
						category: "哨兵"
					},
					{
						code: "ISTP",
						nickname: "鉴赏家",
						image: "/static/mbti/istp.svg",
						category: "探险家"
					},
					{
						code: "ISFP",
						nickname: "探险家",
						image: "/static/mbti/isfp.svg",
						category: "探险家"
					},
					{
						code: "ESTP",
						nickname: "企业家",
						image: "/static/mbti/estp.svg",
						category: "探险家"
					},
					{
						code: "ESFP",
						nickname: "表演者",
						image: "/static/mbti/esfp.svg",
						category: "探险家"
					}
				]
			};
		},
		computed: {
			filteredTypes() {
				if (this.activeCategory === '全部') {
					return this.mbtiTypes;
				} else {
					return this.mbtiTypes.filter(type => type.category === this.activeCategory);
				}
			}
		},
		methods: {
			goToDetail(typeCode) {
				uni.navigateTo({
					url: `/pages/types-detail/type-detail?type=${typeCode}`
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f9fafc;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 42rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.category-tabs {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
	}

	.category-tab {
		padding: 12rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 30rpx;
		transition: all 0.3s;
	}

	.category-tab.active {
		background-color: #4a6bff;
		color: #fff;
		font-weight: 500;
	}

	/* 类别特定颜色 */
	.category-tab.active.analyst {
		background: linear-gradient(135deg, #8a2be2, #da70d6);
	}

	.category-tab.active.diplomat {
		background: linear-gradient(135deg, #2e8b57, #7cfc00);
	}

	.category-tab.active.sentinel {
		background: linear-gradient(135deg, #1e90ff, #00bfff);
	}

	.category-tab.active.explorer {
		background: linear-gradient(135deg, #ffa500, #ffd700);
	}

	.hint-bar {
		text-align: center;
		padding: 16rpx;
		margin-bottom: 20rpx;
		background-color: rgba(106, 152, 208, 0.1);
		border-radius: 8rpx;
	}

	.hint-text {
		font-size: 26rpx;
		color: #6a98d0;
	}

	.types-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.type-card {
		width: 48%;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		background-color: #fff;
		position: relative;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.type-card:active {
		transform: scale(0.98);
	}

	.type-image {
		width: 100%;
		height: 340rpx;
		background-color: #f5f5f5;
	}

	.type-info {
		padding: 20rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* 不同类别的卡片底部颜色 */
	.analyst-card {
		background: linear-gradient(to bottom, rgba(138, 43, 226, 0.8), rgba(138, 43, 226, 0.95));
	}

	.diplomat-card {
		background: linear-gradient(to bottom, rgba(46, 139, 87, 0.8), rgba(46, 139, 87, 0.95));
	}

	.sentinel-card {
		background: linear-gradient(to bottom, rgba(30, 144, 255, 0.8), rgba(30, 144, 255, 0.95));
	}

	.explorer-card {
		background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8), rgba(255, 165, 0, 0.95));
	}

	.type-code {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 6rpx;
	}

	.type-name {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.95);
	}

	/* 添加一些动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.type-card {
		animation: fadeIn 0.5s;
	}
</style>